{% extends '::base.html.twig' %}

{% block contenu %}

<div id=container>
    {% for m in monuments %}
        <a href="{{path('site_monument_show',{id:m.id})}}" class="monument" data-region="{{ m.region }}" data-types="{{ m.types|join(" ") }}" data-date="{{ m.dateCons }}">
            <img src="{{ asset(m.imageAccueil.getWebPath) }}" alt="{{ m.nom }}" />
            <h2>{{ m.nom }}</h2>—<br/>
            <!-- A modifier surement : affichage du picto -->
            <div class= pictos>
                {% for t in m.types %}
                <img src={{t.getPicto}}/>
                {% endfor %}
            </div>
            <div class=resume>{{ m.resume }} </div>
        </a>
    {% endfor %}

</div>

{% endblock %}

{% block menu %}
{{ parent() }}

                
    <ul id="filters">
        <li><a href="#" data-filter="*">Tous</a></li>
        <li><a href="#" id="menu_geo">Géographique</a>
            <ul>
                {% for r in regions %}
                    <li><a href="#" data-filter="[data-region~='{{r}}']">{{ r }}</a></li>
                {% endfor %}
            </ul>
        </li>
    </ul>
{% endblock %}

{% block javascripts %}
{{ parent() }}
    <script type="text/javascript">
    $(document).ready(function() {
    	
    	
        //$('#container').isotope({ filter: '.monument' });
        $('#container').isotope({
            // options
            itemSelector : '.monument',
            layoutMode : 'masonry'
        });
            
                
        $('#filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $('#container').isotope({ filter: selector });
            return false;
            }); 
            

       });       
       </script>
{% endblock %}
